/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/




import React from 'react';
import { Select, Badge } from 'antd';
import './index.less';
const { Option } = Select;

interface Option {
    value: string;
    label: string;
    num?: number | string
}

interface Props {
    options: Option[];
    onChange: (value: string) => void;
    labelInValue?: boolean;
}


const SelectWithBadge: React.FC<Props> = (props) => {
    const { options, labelInValue, onChange } = props;
    // 如果需要默认值
    // const [selectedValue, setSelectedValue] = useState('');

    const handleChange = (value: string) => {
        // setSelectedValue(value);
        onChange(value);
    };

    return (
        <Select labelInValue={labelInValue} style={{ width: '140px', height: '40px' }} placeholder='请选择' optionLabelProp='label' onChange={handleChange} >
            {options.map(item => (
                <Option value={item.value} key={item.value} className='brand' >
                    {item.label} <div style={{ position: 'absolute', top: '0px', right: '4px' }}><Badge count={String(item.num)}></Badge></div>
                </Option>
            ))}
        </Select>
    );
};

export default SelectWithBadge;
